<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img :src="params.weixin_url" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 技术干货分享</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
                <!--   {{}}: 挂载属性  每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。  实例上的属性和方法只能够在当前实例挂载的标签中使用。      -->
                <p>QQ: {{params.qq}}</p>
                <p>邮箱: {{ params.email }}</p>
            </div>
        </div>



        <!-- 广告图 -->
        <img class="mt-3" :src="params.ad_1001_url" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />
                <p v-for="obj in countNumberList">
                    <a :href="'blog-classify.html?'+obj.typeId" class="card-link text-decoration-none text-primary">
                      {{obj.articleTypeName}} <span style="color: gray">({{obj.num}})</span>
                    </a>
                </p>

            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
              <!-- v-for：循环   v-for="元素 in 数据源" -->
                <p v-for="o in countTimeList">
                    <a href="#" class="card-link text-decoration-none text-primary">
                      {{o.publishTime}} <span style="color: gray">({{o.count}})</span>
                    </a>
                </p>

            </div>
        </div>

      <div class="card bg-light mt-3">
        <div class="card-body">
          <h5>文章推荐</h5>
          <hr />
          <div v-for="r in articles" v-model="articles" class="text item">
            <a :href="'blog-detail.html?'+r.id" class="card-link text-decoration-none text-primary">
              {{ r.articleName }}
            </a>
            <!--          <a>{{ r.articleName }}</a>-->
            <p>{{r.articleRemark}}</p>
          </div>
        </div>
      </div>

      <!-- 卡片四：归档 -->

      <div class="card bg-light mt-3">
        <div class="card-body">
          <h5>社区推荐</h5>
          <hr />
          <div class="d-flex"  v-for="o in communityList"  height="100px">
            <img :src="o.pic" height="80px" width="120px" alt="">
            <div class="ms-5" >
              <p class="mb-0">{{o.communityName}}</p><br>
              <div class="d-flex">
                <p class="me-5 mb-5" style="color: #909399">原创：{{ o.articleCount}}</p>
                <p class="ms-5 mb-5" style="color: #909399">粉丝数：{{o.fansCount}}</p>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
</template>

<script>
module.exports = {
    data() {
      return{
        // 1. 存储根据文章分类统计数据
        countNumberList:[],

         // 2. 存储根据时间统计数据
        countTimeList:[],

        // 3. 博客参数
        params:{},
        articles:[],

        communityList:{},
      }
    },
    methods: {
      // 1.存储根据文章分类统计数据
      countNumberByType(){
        this.$http.get("/article/countNumberByType").then(res => {
          // 将返回的数据赋给 存储文章分类的数据
          this.countNumberList = res.data;
        })
      },

      // 2.查询根据时间统计数据的方法
      countNumberByTime(){
        this.$http.get("/article/countNumberByTime").then(res => {
          // 将返回的数据赋给 存储文章分类的数据
          this.countTimeList = res.data;
        })
      },

      // 3.查询博客参数的方法
      getParams(){
        this.$http.get("/param/getParams").then(res => {
          // 将返回的数据赋给 存储博客参数
          this.params = res.data;
        })
      },
      getArticleRecommend(){
        this.$http.get("/article/getArticleRecommend").then(res => {
          this.articles = res.data;
        })
      },

      getCommunity(){
        this.$http.get("/community/communityRanking").then(res =>{
          console.log(res.data)
          this.communityList = res.data;
        })
      }


    },
    mounted() {
      // 1.存储根据文章分类统计数据
      this.countNumberByType();

      // 2.查询根据时间统计数据的方法
      this.countNumberByTime();

    // 2.查询博客参数的方法
      this.getParams();

      this.getArticleRecommend();

      this.getCommunity();

    },
}
</script>

<style></style>